<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/element-ui.js"></script>
    <link rel="stylesheet" href="./js/element-ui.css">
    <script src="./js/axios.js"></script>
</head>

<body>
    <div id="app">
        <!-- 这里是/ -->

        <router-view></router-view>
    </div>
    <script>
        let login = {
            template: `
            <div>
                 <h1>这是一个登录页面</h1>
                 用户登录：<input type="text" v-model="loginData.username"><br/>
                 密&emsp;&emsp;码：<input type="password" v-model="loginData.password"><br/>
                 <!-- &nbsp:一共字符，&ensp;半个汉字；&emsp一个中文汉字 -->
                  <el-button type="primary" @click="logining()">登录</el-button>
            </div>
            `,
            data() {
                return {
                    loginData: {}
                }
            },
            methods: {
                async logining() {
                    // 异步请求的操作
                    axios.defaults.headers.post['Content-Type'] = 'application/json';
                    axios({
                        url: "http://127.0.0.1:8888/user/login",
                        method: 'post',
                        data: JSON.stringify(this.loginData)
                    }).then(res => {
                        console.log(this.loginData);
                        console.log(res);
                        sessionStorage.setItem('token', res.data.data.token)
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        this.$router.push({
                            path: '/index'
                        })
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('用户名或密码错误，请重新输入');
                    })

                }
            },
            created() {
                // this.logining();
            },

        }

        let index = {
            template: `<div>
                <el-table
                    :data="userData"
                    stripe
                    style="width: 100%">
      <el-table-column label="注册日期">
                   <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.registerTime | fmtDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="realname"
                label="姓名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="address"
                label="地址">
                </el-table-column>
            </el-table>
                </div>`,
            data() {
                return {
                    userData: []
                }
            },
            methods: {
                async usering() {
                    axios({
                        url: "http://127.0.0.1:8888/baseUser/findAll",
                        method: 'get',
                        headers: {
                            'Authorization': sessionStorage.getItem('token')
                        }
                    }).then(res => {
                        console.log(res.data.data);

                        this.userData = res.data.data;
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('获取数据失败');
                    })
                }
            },
            created() {
                this.usering()
            },
            filters: {
                fmtDate(val) {
                    return new Date(val).toLocaleString();
                }
              
            }

        }
        let router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/index', component: index }
            ]

        })
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        })
    </script>
</body>

</html>